<script setup>
import Test from './components/Test.vue';

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
} from 'vue';

const count = ref(0);

onBeforeMount(() => {
  console.log('onBeforeMount1');
});
onMounted(() => {
  console.log('onMounted1');
});
onBeforeUpdate(() => {
  console.log('onBeforeUpdate1');
});
onUpdated(() => {
  console.log('onUpdated1');
});
onBeforeUnmount(() => {
  console.log('onBeforeUnmount1');
});
onUnmounted(() => {
  console.log('onUnmounted1');
});
</script>

<template>
  <div>
    <Test v-if="count <= 5" />
    <h1>{{ count }}</h1>
    <button @click="count++">count++</button>
  </div>
</template>
